<template>
  <div class="userinfo">
    <el-row class="userinfo-head">
      <el-col :span="6">
        <el-avatar shape="square"
                   src="https://img.aliyundrive.com/avatar/ec56efec2b0348ed862e9c4f0dde35b7.jpeg"></el-avatar>
      </el-col>
      <el-col :span="14">
        <!--    从vuex中拿到保存的用户名    -->
        {{ $store.state.username }}
      </el-col>
      <el-col :span="4" style="display: flex;flex-direction: row-reverse">
        <!--    退出登录    -->
        <el-button type="text" size="mini" @click="quitLogin()">退出</el-button>
      </el-col>
    </el-row>
    <el-row class="userinfo-main">
      <el-col :span="24"><span>93.51 GB / 1.47 TB</span></el-col>
    </el-row>
    <!--  用进度条表示存储空间  -->
    <div class="userinfo-foot">
      <el-progress :text-inside="true" :stroke-width="12" :percentage="70"></el-progress>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sinfo",
  methods: {
    quitLogin() {
      this.$store.commit("setToken", '');
      this.$store.commit("setUserName", '');
      this.$router.replace('/login/')
    }
  }
}
</script>
